<template>
  <div class="btn-content">
    <div class="basis-title">
      <span>设置答题卡基础信息</span>
    </div>
    <div class="basis_checkbox">
      <el-checkbox
        class="mb-2"
        :model="pageLayout.asSecret"
        label="false"
        @change="handleSecret"
        >密封线</el-checkbox
      >
      <el-row class="mb-3">
        <el-col :span="10" :push="2" v-if="!pageLayout.asSecret"
          ><el-radio
            v-model="pageLayout.schNumType"
            :label="1"
            @change="handleSchNumType"
            >考号填涂区</el-radio
          ></el-col
        >
        <el-col :span="10" :push="2" v-if="!pageLayout.asSecret"
          ><el-radio
            v-model="pageLayout.schNumType"
            :label="2"
            @change="handleSchNumType"
            >条形码</el-radio
          ></el-col
        >
        <el-col :span="10" :push="2" v-if="!pageLayout.asSecret"
          ><el-checkbox
            v-model="pageLayout.asNoteExist"
            @change="handleNoteExist"
            >注意事项</el-checkbox
          ></el-col
        >
        <el-col :span="10" :push="2" v-if="!pageLayout.asSecret"
          ><el-checkbox v-model="pageLayout.asLackMark" @change="handleLackMark"
            >缺考标记</el-checkbox
          ></el-col
        >
        <el-col :span="10" :push="2"
          ><el-checkbox
            v-model="pageLayout.courseCode"
            @change="handleCourseCode"
            >课题号</el-checkbox
          ></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="10" :push="2"
          ><el-checkbox v-model="pageLayout.asAbPaper" @change="handleAbPaper"
            >存在AB卷</el-checkbox
          ></el-col
        >
        <el-col :span="10" :push="2"
          ><el-checkbox v-model="pageLayout.asRedCard" @change="handleRedCard"
            >红色答题卡</el-checkbox
          ></el-col
        >
        <el-col :span="12" :push="2"
          ><el-checkbox
            v-model="pageLayout.asColumn"
            @change="hanldeObjectiveColumn"
            >客观题竖向排列</el-checkbox
          ></el-col
        >
        <el-col :span="24"
          ><el-checkbox
            v-model="pageLayout.scorer"
            @change="handleScorerChange"
          >
            评卷人</el-checkbox
          ></el-col
        >
        <!-- <el-col :span="12"
          ><el-checkbox v-model="pageLayout.asBlock" @change="handleBlock"
            >分区答题卡</el-checkbox
          ></el-col
        > -->
      </el-row>
    </div>
    <div class="basis-title" v-if="pageLayout.asType == 2">
      <span>先阅后扫设置</span>
    </div>
    <div class="basis_checkbox" v-if="pageLayout.asType == 2">
      <el-row>
        <el-col :span="24"
          ><el-checkbox
            v-model="pageLayout.asRegularMark"
            @change="handleRegularMark"
            >显示打分规范</el-checkbox
          ></el-col
        >
        <el-col :span="24"
          ><el-checkbox
            v-model="pageLayout.asScorePoint"
            label="1"
            @change="handleScorePoint"
            >填空题打分框模式</el-checkbox
          ></el-col
        >
      </el-row>
    </div>
    <div class="basis-title">
      <span>添加题目</span>
    </div>
    <div class="basis_checkbox basic_btn">
      <el-button type="primary" plain @click="questionDialog">客观题</el-button>
      <el-button type="primary" plain @click="fillInTheBlank">填空题</el-button>
      <el-button type="primary" plain @click="answerQuestion">解答题</el-button>
      <el-button type="primary" plain @click="compositionEnglish"
        >作文(英)</el-button
      >
      <el-button type="primary" plain @click="compositionLanguage"
        >作文(语)</el-button
      >
      <el-button type="primary" plain @click="NonRresponseArea"
        >非作答</el-button
      >
      <el-button
        style="margin-left:0"
        v-if="pageLayout.asType == 1"
        type="primary"
        plain
        @click="optionalQuestion"
        >选做题</el-button
      >
    </div>
    <div class="basis_checkbox basic_btn save-btn">
      <el-button type="success" @click="handlePreviewLink">预览</el-button>
      <el-button type="primary" @click="handleSaveBtn">保存</el-button>
      <!-- <el-button type="danger" @click="handleDownloadLayer">下载</el-button> -->
    </div>
    <public-dialog ref="publicDialog" />
    <el-dialog
      title="提示"
      :visible.sync="openeDownloadLayer"
      :width="'400px'"
      :close-on-click-modal="false"
      center
    >
      <div class="Prompt_info">
        <div><i class="el-icon-question"></i>是否保存当前答题卡并下载？</div>
        <div style="color: #f00; margin-left: 0px">
          注：下载后答题卡将不能再修改。
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDownloadLayer">取 消</el-button>
        <el-button size="small" type="primary" @click="handelDownload"
          >保存并下载</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="openeStructureLayer"
      :width="'400px'"
      :close-on-click-modal="false"
      center
    >
      <div class="Prompt_info">
        <div>
          <i class="el-icon-question"></i>是否保存当前答题卡并显示结构?？
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeStructureLayer">取 消</el-button>
        <el-button size="small" type="primary" @click="handleStructure"
          >保存显示结构</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import publicDialog from "./dialog/_publicDialog";
import { QUESTION_NUMBERS } from "@/models/base";
import bus from "./../../utils/eventBus.js";
import { saveAnswerSheetInfo } from "@/api";
import _ from "lodash";
import { PRECAUTIONS } from "@/models/base";

export default {
  components: {
    publicDialog,
  },
  data() {
    return {
      checked: false,
      openeDownloadLayer: false,
      openeStructureLayer: false,
      openedFrame: true,
      saveBtnStuta: false,
      structureStatus: false,
      acid: "",
      returnIsNew: "",
      returnAcid: "",
      options: QUESTION_NUMBERS.map((label, value) => ({ label, value })),
    };
  },
  computed: {
    ...mapState("page", ["pageLayout", "pageData", "IsNew"]),
    ...mapState("pageContent", ["scoreTotal"]),
    ...mapState("questionType", ["subTopic_number_determine"]),
    ...mapGetters("page", ["page_width", "compile_pageData"]),

    pageWidth() {
      const { column, paperSpec } = this.pageLayout;
      return column === 3 && paperSpec == "A3" ? 520 : 785;
    },

    textVal() {
      const { content } = this.compile_pageData[0];
      return content.textVal;
    },

    pageNum() {
      const { column, paperSpec } = this.pageLayout;
      return column === 3 && paperSpec == "A3"
        ? 3
        : column === 1 && paperSpec == "A4"
        ? 1
        : 2;
    },

    questionLsit() {
      // 重新结构数据
      let sorted = this.$lodash.groupBy(this.compile_pageData, function(item) {
        return item.questionType == "answerQuestion" && item.objId;
      });

      let Arr = [];
      Object.values(sorted).forEach((element) => {
        if (element[0].questionType == "answerQuestion") {
          let obj = {
            ...element[0],
            showData: element,
          };
          Arr.push(obj);
        } else {
          Arr = [...Arr, ...element];
        }
      });
      return Arr;
    },

    answerSheetData() {
      let obj = {};
      let questionArr = [];
      this.questionLsit.forEach((question) => {
        if (question.questionType == "AnswerSheetTitle") {
          let { content } = question;

          let edit = {};
          if (this.acid) {
            edit = {
              acid: this.acid,
              IsNew: false,
            };
          } else {
            edit = {
              IsNew: true,
            };
          }

          let items = [];
          JSON.parse(localStorage.getItem("accessToken")).forEach((item) => {
            if (item.questionType !== "AnswerSheetTitle") {
              if (item.itemGroup) {
                [...item.itemGroup].forEach((s) => {
                  items.push({
                    sectionNo: QUESTION_NUMBERS[item.content.number],
                    sectionName: item.content.topicName,
                    questionNo: s.scoreNo,
                    score: s.score,
                  });
                });
              } else {
                items.push({
                  sectionNo: QUESTION_NUMBERS[item.content.number],
                  sectionName: item.content.topicName,
                  questionNo: item.questionNo,
                  score: item.score,
                });
              }
            }
          });
          obj = {
            name: content.textVal,
            totalScore: this.scoreTotal,
            exnum: content.titleRows,
            studentInfos: content.titleInfo
              .filter((item) => item.checked)
              .map((item) => item.name)
              .toString(),
            content: JSON.parse(localStorage.getItem("accessToken")),

            items: items.sort((a, b) => {
              return a.questionNo - b.questionNo;
            }),
            remark: this.subTopic_number_determine,
            pageLayout: this.pageLayout,
            ...edit,
          };
        } else {
          switch (question.questionType) {
            case "ObjectiveQuestion":
              questionArr.push(this.objectiveTopic(question));
              break;
            case "FillInTheBlank":
              questionArr.push(this.FillInTheBlankTopic(question));
              break;
            case "optionalQuestion":
              questionArr.push(this.optionalTopic(question));
              break;
            case "compositionEnglish":
              questionArr.push(this.compositionTopic(question));
              break;
            case "compositionLanguage":
              questionArr.push(this.languageTopic(question));
              break;
            default:
              questionArr.push(this.answerTopic(question));
          }
        }
      });
      return obj;
    },
  },

  methods: {
    ...mapMutations("page", [
      "pageLayout_change",
      "reset_pageData",
      "pageData_edit_header",
    ]),
    questionDialog() {
      this.$refs.publicDialog.opened("questionDialogs");
    },
    fillInTheBlank() {
      this.$refs.publicDialog.opened("fillInTheBlanks");
    },
    answerQuestion() {
      this.$refs.publicDialog.opened("answerQuestion");
    },
    optionalQuestion() {
      this.$refs.publicDialog.opened("optionalQuestion");
    },
    compositionEnglish() {
      this.$refs.publicDialog.opened("compositionEnglish");
    },
    compositionLanguage() {
      this.$refs.publicDialog.opened("compositionLanguage");
    },
    NonRresponseArea() {
      this.$refs.publicDialog.opened("NonRresponseArea");
    },
    onVerify() {
      let previewContent = JSON.parse(sessionStorage.getItem("previewContent"));
      if (
        (this.pageLayout.column === 1 && previewContent.length > 2) ||
        (this.pageLayout.column === 2 && previewContent.length > 4) ||
        (this.pageLayout.column === 3 && previewContent.length > 6)
      ) {
        this.$message({
          message: "答题卡已超过两页，请修改!",
          type: "warning",
        });
        throw "答题卡已超过两页，请修改!";
      }

      if (!this.textVal) {
        this.$message({
          message: "答题卡标题不能为空!",
          type: "warning",
        });
        throw "答题卡标题不能为空!";
      }
    },
    async handlePreviewLink() {
      this.onVerify();

      await this.handleSaveBtn();

      const query = {
        pageWidth: this.pageWidth,
        pageNum: this.pageNum,
        id: this.$route.query.id,
        name: this.$route.query.name,
        paperSpec: this.pageLayout.paperSpec,
      };

      // 跳转至预览页面
      let routeTwo = this.$router.resolve({ name: "preview", query });
      window.open(routeTwo.href, "_blank");
    },
    openDownloadLayer() {
      this.openeDownloadLayer = true;
    },
    closeDownloadLayer() {
      this.openeDownloadLayer = false;
    },
    handleDownloadLayer() {
      this.openDownloadLayer();
    },
    handelDownload() {
      this.closeDownloadLayer();
      this.saveBtnStuta = true;
      this.handleSaveBtn();
    },
    openStructureLayer() {
      this.openeStructureLayer = true;
    },
    closeStructureLayer() {
      this.openeStructureLayer = false;
    },
    handleStructureLayer() {
      this.openStructureLayer();
    },
    handleStructure() {
      this.closeStructureLayer();
      this.structureStatus = true;
      this.handleSaveBtn();
    },
    generatePDF() {
      const content = document.getElementById("container-card");
      html2canvas(content).then((canvas) => {
        const pdf = new jsPDF();
        const imgData = canvas.toDataURL("image/png");
        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
        pdf.save("download.pdf");
      });
    },
    async handleSaveBtn() {
      this.onVerify();

      const options = {
        content: JSON.stringify({ ...this.answerSheetData }),
        id: this.$route.query.id,
        name: this.$route.query.name,
        description: this.$route.description,
      };

      const loading = this.$loading({
        lock: true,
        text: "保存中。。。",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      try {
        await saveAnswerSheetInfo(options);
        this.$message.success("保存成功");
      } catch (error) {
      } finally {
        loading.close();
      }
    },

    objectiveTopic(question) {
      // 客观题
      let { content, showData } = question;
      let obj = {
        num: content.number,
        name: content.topicName,
        type: "客观题",
        totalScore: content.scoreTotal,
      };

      return obj;
    },

    FillInTheBlankTopic(question) {
      // 客观题
      let { content, showData } = question;
      let obj = {
        num: content.number,
        name: content.topicName,
        type: "主观题",
        totalScore: content.scoreTotal,
      };

      return obj;
    },

    optionalTopic(question) {
      // 选作题
      let { content } = question;
      let obj = {
        num: content.number,
        name: content.topicName,
        type: "主观题",
        totalScore: content.scoreTotal,
      };

      return obj;
    },

    compositionTopic(question) {
      // 作文（英）
      let { content } = question;
      let obj = {
        num: content.number,
        name: content.topicName,
        type: "主观题",
        totalScore: content.scoreTotal,
      };

      return obj;
    },

    languageTopic(question) {
      // 作文（语）
      let { content } = question;
      let obj = {
        num: content.number,
        name: content.topicName,
        type: "主观题",
        totalScore: content.scoreTotal,
      };

      return obj;
    },

    answerTopic(question) {
      let { content, showData } = question;
      let obj = {
        num: content.number,
        name: content.topicName,
        type: "主观题",
        totalScore: question.scoreTotal,
      };

      return obj;
    },
    // 密封线
    handleSecret(e) {
      this.pageLayout.asSecret = e;
      this.pageLayout_change(this.pageLayout);
      if (e) {
        this.pageData[0].contentHeight = 0;
      } else {
        this.pageData[0].contentHeight = 293;
      }
      localStorage.setItem(
        "accessToken",
        JSON.stringify(this.compile_pageData)
      );
      this.reset_pageData(this.pageData);
    },
    // 填写布局
    handleSchNumType(e) {
      this.pageLayout.schNumType = e;
      this.pageLayout_change(this.pageLayout);
      localStorage.setItem(
        "accessToken",
        JSON.stringify(this.compile_pageData)
      );
    },
    // 注意事项
    handleNoteExist(e) {
      this.pageLayout.asNoteExist = e;
      this.pageLayout_change(this.pageLayout);
      if (e && this.pageLayout.column !== 3) {
        this.pageData[0].checkHeight = 40;
      } else if (e && this.pageLayout.column === 3) {
        this.pageData[0].checkHeight = 80;
      } else {
        this.pageData[0].checkHeight = 0;
      }

      this.pageData[0].content.noticesRules = PRECAUTIONS;

      this.reset_pageData(this.pageData);
    },
    // 缺考标记
    handleLackMark(e) {
      this.pageLayout.asLackMark = e;
      this.pageLayout_change(this.pageLayout);
      localStorage.setItem(
        "accessToken",
        JSON.stringify(this.compile_pageData)
      );
    },

    handleCourseCode(e) {
      this.pageLayout.courseCode = e;
      this.pageLayout_change(this.pageLayout);

      const courseCodeHeight = this.pageData[0].courseCodeHeight;
      this.pageData[0].courseCodeHeight = courseCodeHeight > 1 ? 0 : 52;

      this.reset_pageData(this.pageData);
    },
    // 存在AB卷
    handleAbPaper(e) {
      this.pageLayout.asAbPaper = e;
      this.pageLayout_change(this.pageLayout);
      this.pageData[0].heightTitle =
        e && this.pageData[0].heightTitle < 78
          ? 78
          : this.pageData[0].heightTitle < 40
          ? 40
          : 40;
      // console.log(this.pageData[0]);
      this.reset_pageData(this.pageData);
    },
    // 红色答题卡
    handleRedCard(e) {
      this.pageLayout.asRedCard = e;
      this.pageLayout_change(this.pageLayout);
      localStorage.setItem(
        "accessToken",
        JSON.stringify(this.compile_pageData)
      );
    },
    // 客观题竖向排列
    hanldeObjectiveColumn(e) {
      this.pageLayout.asColumn = e;
      this.pageLayout_change(this.pageLayout);
      localStorage.setItem(
        "accessToken",
        JSON.stringify(this.compile_pageData)
      );
      bus.$emit("objectiveColumn", e);
      // console.log(this.pageData);
      this.pageData.forEach((item) => {
        if (item.questionType == "ObjectiveQuestion") {
          item.asColumn = e;
        }
      });
      this.reset_pageData(this.pageData);
    },
    // 分区答题卡
    handleBlock(e) {
      this.pageLayout.asBlock = e;
      this.pageLayout_change(this.pageLayout);
    },

    // 显示打分规范 norm
    handleRegularMark(e) {
      this.pageLayout.asRegularMark = e;
      if (e) {
        this.pageData[0].regularMarkHeight = 80;
        if (this.pageLayout.asScorePoint) {
          this.pageData[0].scorePointHeight = 35;
        }
      } else {
        this.pageData[0].regularMarkHeight = 0;
        this.pageData[0].scorePointHeight = 0;
      }
      this.pageLayout_change(this.pageLayout);
      this.reset_pageData(this.pageData);
    },
    handleScorePoint(e) {
      this.pageLayout.asScorePoint = e;
      if (e && this.pageLayout.asRegularMark) {
        if (this.pageLayout.asEachMark == 2 && this.pageLayout.column === 3) {
          this.pageData[0].scorePointHeight = 30;
        } else {
          this.pageData[0].scorePointHeight = 35;
        }
      } else {
        this.pageData[0].scorePointHeight = 0;
      }
      this.pageLayout_change(this.pageLayout);
      this.reset_pageData(this.pageData);
    },
    handleScorerChange(e) {
      this.pageLayout.scorer = e;
      const heightTitle = e ? 48 : -48;
      const pageData = _.map(this.pageData, (item) => {
        if (["FillInTheBlank"].includes(item.questionType) && item.first) {
          item.height += heightTitle;
          item.answerArrHeight[0] += heightTitle;
        }
        return item;
      });

      // this.reset_pageData(pageData);
      this.pageLayout_change(this.pageLayout);
    },
    // 填空题每空打分
    handleEachMark(e) {
      this.pageLayout.asEachMark = e;
      if (this.pageLayout.asRegularMark) {
        if (e == 2 && this.pageLayout.column === 3) {
          this.pageData[0].scorePointHeight = 30;
        } else {
          this.pageData[0].scorePointHeight = 35;
        }
      }
      this.pageLayout_change(this.pageLayout);
      this.reset_pageData(this.pageData);
    },
    handleAsScoreMode(e) {
      this.pageLayout.asScoreMode = e;
      localStorage.setItem(
        "accessToken",
        JSON.stringify(this.compile_pageData)
      );
      this.pageLayout_change(this.pageLayout);
      this.reset_pageData(this.pageData);
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/variables.less";

.btn-content {
  width: 320px;
  float: right;
  border-left: 1px solid @shadow;
  height: 100%;
  background: @white;
  // position: fixed;
  // right: 10px;
  // top: 50px;
  // z-index: 100;
}

.basis-title {
  border-left: none;
  border-right: none;
  background-color: @bf-f7;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  padding: 0 30px;
  border-bottom: 1px solid @bs-e3;
}

.basis_checkbox {
  padding: 20px 0;
  border-bottom: 1px solid @shadow;
  padding-left: 15px;

  .el-col {
    margin-bottom: 5px;
  }
}

.el-button--medium {
  padding: 0 0;
  width: 90px;
  padding: 0;
  height: 38px;
  line-height: 36px;
}

.basis_checkbox.basic_btn {
  padding: 15px 0;
  padding-left: 15px;

  .el-button {
    margin-bottom: 10px;
  }

  .el-button:nth-child(4) {
    margin-left: 0;
  }
}

// .el-button--primary {
//   // background-color: @main !important;
//   // border-color: @main !important;
// }

// .el-button:hover {
//   // color: @main !important;
//   // border-color: @bc_hover !important;
//   // background-color: @mainHover !important;
// }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: @main !important;
  border-color: @main !important;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: @main !important;
}

// .el-button + .el-button {
//   // margin-left: 0;
// }
button.el-button.el-button--default.el-button--medium {
  margin-top: 10px;
  margin-left: 10px;
}

.basis_checkbox.basic_btn.save-btn {
  display: flex;

  .el-button {
    flex: 1;
  }

  .el-button + .el-button {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
